<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{template}">

<head>
    <title>Countries</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<div layout:fragment="page_content" id="page_content">
    <h1 class="page-header">Countries</h1>
    <div id="countries">
        <div class="row justify-content-md-center">
            <div class="col-md-6 input-group">
                <input type="text" class="filter form-control" id="search_f"
                       v-model:value="search" name="search" placeholder="Search by name" />
                <button id="searchBtn" class="btn btn-primary btn-sm"
                        v-once v-on:click="searchData">
                    <i class="fa fa-search"></i> Search</button>
            </div>
        </div>
        <br />
        <div class="row">
            <div class="col">
                <table class="table table-striped">
                    <thead v-once>
                    <tr>
                        <th width="5%">Code</th>
                        <th>Name</th>
                        <th width="15%">Continent</th>
                        <th width="20%">Region</th>
                        <th width="15%">Capital</th>
                    </tr>
                    </thead>
                    <tbody  v-cloak>
                    <tr v-if="loading">
                        <td colspan="5">
                            <div class="alert alert-info"><i class="fa fa-spinner fa-spin"></i> Loading data ...</div>
                        </td>
                    </tr>
                    <tr v-for="c in remote.content" :key="c.code" v-else>
                        <td>{{ c.code }}</td>
                        <td>{{ c.name }}</td>
                        <td>{{ c.continent }}</td>
                        <td>{{ c.region }}</td>
                        <td><span v-if="c.capital">{{ c.capital.name }}</span></td>

                    </tr>
                    </tbody>
                </table>
                <div>
                    <pagination :total="remote.totalPages" :current="currentPage"
                                :maxvisible="maxVisible" :callback="paginationCallback"></pagination>
                </div>

            </div>
        </div>
    </div>
</div>
<th:block layout:fragment="scripts">
    <script type="text/x-template" id="pagination-template">
        <nav aria-label="Page navigation example">
            <ul class="pagination">
                <li class="page-item" :class="{disabled: disablePrev}">
                    <a class="page-link" href="javascript:void(0);"
                       v-on:click="previous">Previous</a>
                </li>
                <li class="page-item" :class="{ active: (p == current)}" v-for="p in range">
                    <a class="page-link" href="javascript:void(0);"
                       v-on:click="callback(p)">{{ p }}</a>
                </li>
                <li class="page-item" :class="{disabled: disableNext}">
                    <a class="page-link" v-on:click="next" href="javascript:void(0)">Next</a>
                </li>
            </ul>
        </nav>
    </script>

    <script type="text/javascript">
        var vm;
        Vue.component('pagination', {
            template: '#pagination-template',
            props: ["total", "current", "callback", "maxvisible"],
            data: function(){
                return {
                    start: 1,
                    end: this.maxvisible
                }
            },
            computed: {
                range: function(){
                    return _.range(this.start, this.end + 1, 1);
                },
                disablePrev: function(){
                    return this.start <= 1;
                },
                disableNext: function(){
                    return this.end >= this.total;
                }
            },
            methods:{
                next: function(){
                    var newEnd = this.end + this.maxvisible;
                    if ( newEnd <= this.total){
                        this.start = this.start + this.maxvisible;
                        this.end = newEnd;
                    }

                },

                previous: function(){
                    var newStart = this.start - this.maxvisible;
                    if ( newStart >= 1){
                        this.start = newStart;
                        this.end = this.end - this.maxvisible;
                    }
                }

            }

        });

        $(function(){
            vm = new Vue({
                mounted: function(){
                    this.$nextTick(function () {
                        getCountries();
                    });
                },
                el: "#countries",
                data: {
                    remote: {},
                    loading: true,
                    maxVisible: 5,
                    search: "",
                    currentPage: 1
                },
                methods:{
                    paginationCallback: function(page){
                        this.currentPage = page;
                        getCountries();
                    },
                    searchData: function(){
                        getCountries();
                    }
                }
            });




        });

        function getCountries(){
            var params = {size: 10};
            console.log(vm);
            params['page'] = vm.currentPage - 1;
            if ( vm.search ){
                params['search'] = vm.search;
            }

            $.getJSON("/api/countries", params, function(remote){
                vm.remote = remote;
                vm.loading = false;
            });

        }
    </script>
</th:block>
</html>